<!DOCTYPE html>
<html>
<head>
    <title>Nuclear Energy Level Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="850" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General Style Settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        const fontFamily = "Arial, sans-serif";
        const baseFontSize = 22;
        ctx.font = `${baseFontSize}px ${fontFamily}`;
        ctx.textBaseline = 'middle';

        // Helper function for drawing text with a superscript
        function drawTextWithSuperscript(mainText, supText, x, y, textAlign = 'left') {
            ctx.textAlign = textAlign;
            const mainFont = `${baseFontSize}px ${fontFamily}`;
            const supFont = `${baseFontSize * 0.7}px ${fontFamily}`;

            // Draw main text
            ctx.font = mainFont;
            ctx.fillText(mainText, x, y);

            // Calculate position and draw superscript
            const mainTextWidth = ctx.measureText(mainText).width;
            ctx.font = supFont;
            if (textAlign === 'right') {
                ctx.fillText(supText, x, y - baseFontSize * 0.45);
            } else { // 'left' or 'center'
                ctx.fillText(supText, x + mainTextWidth - 3, y - baseFontSize * 0.45);
            }
             // Reset font
            ctx.font = mainFont;
        }
        
        // Helper function for drawing isotope notation
        function drawIsotope(symbol, mass, x, y) {
            ctx.textAlign = 'center';
            const mainFont = `${baseFontSize * 1.1}px ${fontFamily}`;
            const supFont = `${baseFontSize * 0.7}px ${fontFamily}`;
            
            ctx.font = mainFont;
            ctx.fillText(symbol, x, y);
            
            const symbolWidth = ctx.measureText(symbol).width;
            ctx.font = supFont;
            ctx.fillText(mass, x - symbolWidth / 2 - 1, y - baseFontSize * 0.4);
            
            // Reset font
            ctx.font = `${baseFontSize}px ${fontFamily}`;
        }


        // --- Draw Bounding Box ---
        ctx.strokeRect(50, 50, 750, 450);

        // --- Left Column: 7Li ---
        const xLiLineStart = 200;
        const xLiLineEnd = 320;
        const xLiEnergy = 180;
        const xLiSpin = 330;
        const yLiName = 485;

        // Level: 4.63 MeV (7/2)-
        const yLi_2 = 130;
        ctx.beginPath();
        ctx.moveTo(xLiLineStart, yLi_2);
        ctx.lineTo(xLiLineEnd, yLi_2);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.fillText("4.63 MeV", xLiEnergy, yLi_2);
        drawTextWithSuperscript("(7/2)", "−", xLiSpin, yLi_2);

        // Level: 0.48 MeV (1/2)-
        const yLi_1 = 330;
        ctx.beginPath();
        ctx.moveTo(xLiLineStart, yLi_1);
        ctx.lineTo(xLiLineEnd, yLi_1);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.fillText("0.48 MeV", xLiEnergy, yLi_1);
        drawTextWithSuperscript("(1/2)", "−", xLiSpin, yLi_1);

        // Ground State: 0 MeV (3/2)-
        const yLi_0 = 420;
        ctx.beginPath();
        ctx.moveTo(xLiLineStart, yLi_0);
        ctx.lineTo(xLiLineEnd, yLi_0);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.fillText("0 MeV", xLiEnergy, yLi_0);
        drawTextWithSuperscript("(3/2)", "−", xLiSpin, yLi_0);

        // Isotope Name: 7Li
        drawIsotope('Li', '7', 300, yLiName);

        // --- Right Column: 7Be ---
        const xBeLineStart = 530;
        const xBeLineEnd = 650;
        const xBeSpin = 440;
        const yBeName = 485;
        
        // Top Level: (7/2)-
        const yBe_2 = 120;
        ctx.beginPath();
        ctx.moveTo(xBeLineStart, yBe_2);
        ctx.lineTo(xBeLineEnd, yBe_2);
        ctx.stroke();
        ctx.textAlign = 'right';
        drawTextWithSuperscript("(7/2)", "−", xBeSpin, yBe_2, 'left');

        // Middle Level: (1/2)-
        const yBe_1 = 340;
        ctx.beginPath();
        ctx.moveTo(xBeLineStart, yBe_1);
        ctx.lineTo(xBeLineEnd, yBe_1);
        ctx.stroke();
        ctx.textAlign = 'right';
        drawTextWithSuperscript("(1/2)", "−", xBeSpin, yBe_1, 'left');

        // Lower Solid Level: (3/2)- with energy label
        const yBe_0_solid = 400;
        ctx.beginPath();
        ctx.moveTo(xBeLineStart, yBe_0_solid);
        ctx.lineTo(xBeLineEnd, yBe_0_solid);
        ctx.moveTo(xBeLineEnd, yBe_0_solid); // Connector line for energy
        ctx.lineTo(xBeLineEnd + 30, yBe_0_solid);
        ctx.stroke();
        ctx.textAlign = 'right';
        drawTextWithSuperscript("(3/2)", "−", xBeSpin, yBe_0_solid, 'left');
        ctx.textAlign = 'left';
        ctx.fillText("0.86 MeV", xBeLineEnd + 35, yBe_0_solid);

        // Dashed Ground State
        const yBe_gnd = 450;
        ctx.beginPath();
        ctx.setLineDash([8, 6]);
        ctx.moveTo(xBeLineStart, yBe_gnd);
        ctx.lineTo(xBeLineEnd, yBe_gnd);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid lines

        // Isotope Name: 7Be
        drawIsotope('Be', '7', 620, yBeName);

    </script>
</body>
</html>